<template>
  <div class="padded-top">
    <navigation>{{ $t('迷航舰位排行榜') }}</navigation>
    <div class="tab">
      <ul class="tab-label">
        <li :class="['item', tabActive == 0 ? 'active' : '']" @click="tabActive = 0">舰位总数排行榜</li>
        <li :class="['item', tabActive == 1 ? 'active' : '']" @click="tabActive = 1">舰位总价值排行榜</li>
      </ul>
      <div class="tab-value">
        <div :class="['tab-item', tabActive == 0 ? 'active' : '']">
          <table class="table">
            <thead>
              <tr>
                <th class="no-width">序号</th>
                <th class="name-width">用户</th>
                <th class="no-width">总数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in rank1" :key="item.n">
                <td>{{ item.n }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.mh_total_ship_count }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div :class="['tab-item', tabActive == 1 ? 'active' : '']">
          <table class="table">
            <thead>
              <tr>
                <th class="no-width">序号</th>
                <th class="name-width">用户</th>
                <th class="no-width">总价值</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in rank2" :key="item.n">
                <td>{{ item.n }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.mh_used_ship_value }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      tabActive: 0,
      rank1: [],
      rank2: []
    }
  },
  mounted () {
    this.mhRankCount()
      .then((data) => {
        if (data.data) {
          this.rank1 = data.data
        }
      })
      .catch((data) => {
        this.$toast.error(data.message)
      })
    this.mhRankValue()
      .then((data) => {
        if (data.data) {
          this.rank2 = data.data
        }
      })
      .catch((data) => {
        this.$toast.error(data.message)
      })
  },
  methods: {
    ...mapActions({
      mhRankCount: 'weath/mhRankCount',
      mhRankValue: 'weath/mhRankValue'
    })
  }
}
</script>

<style scoped>
.padded-top {
  padding-top: 90px;
}
.tab-label {
  display: flex;
  border-bottom: 1px solid #f6f6f6;
}
.tab-label .item {
  position: relative;
  flex: 1 0 0;
  text-align: center;
  color: #00acf4;
  line-height: 40px;font-size: 14px;
}
.tab-label .item::before {
  content: "";opacity: 0;transition: 0.2s;
  position: absolute;bottom: 0;left: 50%;margin-left: -10px;
  width: 20px;height: 0;
  border-bottom: 2px solid #00acf4;
}
.tab-label .item.active::before {
  opacity: 1;
}
.tab-item {display: none;}
.tab-item.active {display: block;}
.table {width: 100%;border-spacing: 0;border-collapse: collapse;}
.table thead {background: #f6f6f6;}
.table th {text-align: left;height: 40px;padding: 0 10px;font-size: 14px;font-weight: normal;}
.table td {text-align: left;height: 40px;padding: 0 10px;font-size: 14px;font-weight: normal;}
.table tr:nth-child(even) {background: #f6f6f6;}
.table th:last-child, .table td:last-child {text-align: right;}
.no-widht {width: 20%;}
.name-width {width: 60%;}
</style>
